<template>
  <div class="category-detail-container">
    <nav-bar />
    <div class="category-title">{{ categoryName }}课程</div>
    <div class="course-grid">
      <div class="course-card" v-for="(course, idx) in courses" :key="idx">
        <div class="course-image">
          <img :src="course.cover" :alt="course.title" />
        </div>
        <div class="course-info">
          <h3 class="course-title">{{ course.title }}</h3>
          <p class="instructor">{{ course.instructor }}</p>
          <p class="description">{{ course.description || course.desc }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar.vue'

export default {
  name: 'CategoryDetail',
  components: { NavBar },
  data() {
    return {
      categoryName: '',
      courses: []
    }
  },
  created() {
    this.categoryName = this.$route.query.name || '算法';
    // 这里只做算法分类演示，直接用静态数据
    if (this.categoryName === '算法') {
      this.courses = [
        {
          title: '数据结构与算法',
          instructor: '李教授',
          description: '本课程系统讲解数据结构与算法的基本概念、实现方法和应用场景。',
          cover: require('@/assets/courses/course_ds.jpg')
        },
        {
          title: '大数据算法',
          instructor: '王教授',
          description: '本课程专注于大数据环境下的算法设计与优化。',
          cover: require('@/assets/courses/course_bigdata.jpg')
        },
        {
          title: '算法设计与分析',
          instructor: '张教授',
          description: '本课程深入讲解算法设计与分析的核心概念和方法。',
          cover: require('@/assets/courses/course_algo.jpg')
        },
        {
          title: '程序设计与算法',
          instructor: '刘教授',
          description: '本课程结合程序设计思想与算法技巧。',
          cover: require('@/assets/courses/course_design.jpg')
        },
        {
          title: '人工智能基础',
          instructor: '赵教授',
          description: '本课程介绍人工智能的基本概念、发展历程、主要算法及应用场景。',
          cover: require('@/assets/courses/course_ai.jpg')
        },
        {
          title: '深度学习原理与实践',
          instructor: '钱教授',
          description: '系统讲解深度学习的基本原理、主流网络结构及其在图像、语音、自然语言处理等领域的应用。',
          cover: require('@/assets/courses/course_dl.jpg')
        },
        {
          title: '算法竞赛实战',
          instructor: '孙老师',
          description: '面向ACM/ICPC、蓝桥杯等算法竞赛，系统训练常用算法与数据结构，提升解题能力和竞赛技巧。',
          cover: require('@/assets/courses/course_acm.jpg')
        },
        {
          title: '数据结构可视化',
          instructor: '周老师',
          description: '通过可视化工具和动画演示，帮助学习者直观理解数据结构的实现与操作。',
          cover: require('@/assets/courses/course_visual.jpg')
        },
        {
          title: '算法工程实践',
          instructor: '吴博士',
          description: '聚焦算法在工程中的实际应用，包括推荐系统、搜索引擎、智能硬件等场景的算法设计与优化。',
          cover: require('@/assets/courses/course_eng.jpg')
        },
        {
          title: '算法与数据结构面试宝典',
          instructor: '郑老师',
          description: '针对IT求职面试，系统梳理常见算法与数据结构面试题及解题思路，助力高效备考。',
          cover: require('@/assets/courses/course_interview.jpg')
        }
      ]
    }
  }
}
</script>

<style scoped>
.category-detail-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 40px 0 40px;
}
.category-title {
  font-size: 28px;
  color: #6d28d2;
  font-weight: 700;
  margin-bottom: 32px;
  margin-top: 24px;
}
.course-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.course-card {
  border: 1px solid #6d28d2;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  background-color: white;
}
.course-card:hover {
  border-color: #6d28d2;
  background-color: #f8f7fa;
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(109, 40, 210, 0.15);
}
.course-image img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
}
.course-info {
  padding: 12px;
  text-align: left;
}
.course-title {
  font-size: 16px;
  color: #1f2937;
  margin: 0 0 8px 0;
  font-weight: 500;
  line-height: 1.4;
}
.instructor {
  color: #6b7280;
  font-size: 14px;
  margin: 0;
}
.description {
  color: #4b5563;
  line-height: 1.6;
  margin-top: 8px;
  font-size: 14px;
}
</style> 